{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Call time" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Call time this week" %}</h1>
    <p>{% blocktranslate trimmed with start=start|date:"D j M" end=last_day|date:"D j M Y" %}Week of {{ start }} to {{ end }}{% endblocktranslate %}. {% translate "Minutes are what agents enter on each call." %}</p>
  </div>
  <div class="actions">
    <a class="btn" href="?start={{ prev_week|date:'Y-m-d' }}">{% translate "Previous week" %}</a>
    {% if next_week %}<a class="btn" href="?start={{ next_week|date:'Y-m-d' }}">{% translate "Next week" %}</a>{% endif %}
    <a class="btn" href="?start={{ start|date:'Y-m-d' }}&amp;export=csv">{% translate "Download (CSV)" %}</a>
  </div>
</div>

<div class="figures">
  <div><span class="n">{{ overall.n }}</span><span class="l">{% blocktranslate trimmed with r=overall.received m=overall.made %}Calls: {{ r }} received, {{ m }} made{% endblocktranslate %}</span></div>
  <div><span class="n">{{ overall.spoke }}</span><span class="l">{% translate "Spoke with them" %}</span></div>
  <div><span class="n">{{ overall.minutes }}</span><span class="l">{% translate "Minutes on calls" %}</span></div>
  <div><span class="n">{{ overall.average|default:"—" }}</span><span class="l">{% translate "Average minutes per call" %}</span></div>
</div>

<section class="panel">
  <div class="panel-head"><h2>{% translate "Minutes per day" %}</h2></div>
  <div class="bars week" role="img" aria-label="{% translate 'Minutes per day' %}">
    {% for d in days %}<span class="bar{% if not d.minutes %} zero{% endif %}" style="height:{{ d.height }}%" title="{{ d.day|date:'l' }}: {{ d.minutes }}"></span>{% endfor %}
  </div>
  <div class="bars-axis week">{% for d in days %}<span>{{ d.day|date:"D" }}<br><span class="num">{{ d.minutes }}</span></span>{% endfor %}</div>
</section>

<div class="table-wrap" style="margin-top:20px">
  <table>
    <thead><tr><th>{% translate "Agent" %}</th><th class="right">{% translate "Calls" %}</th><th class="right hide-sm">{% translate "They called us" %}</th><th class="right hide-sm">{% translate "We called them" %}</th><th class="right">{% translate "Spoke with them" %}</th><th class="right">{% translate "Minutes" %}</th><th class="right hide-sm">{% translate "Average" %}</th></tr></thead>
    <tbody>
    {% for r in rows %}
      <tr{% if not r.n %} class="absent"{% endif %}>
        <td><a class="title" href="?person={{ r.person.pk }}">{{ r.person.display_name }}</a></td>
        <td class="right num">{{ r.n }}</td>
        <td class="right num hide-sm">{{ r.received }}</td>
        <td class="right num hide-sm">{{ r.made }}</td>
        <td class="right num">{{ r.spoke }}</td>
        <td class="right num"><strong>{{ r.minutes }}</strong></td>
        <td class="right num hide-sm">{{ r.average|default:"—" }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}